<template>
  <el-container>
    <el-header>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="首页" name="first"></el-tab-pane>
        <el-tab-pane label="学术动态" name="two_"></el-tab-pane>
        <el-tab-pane label="文献库" name="two"></el-tab-pane>
        <el-tab-pane label="文件库" name="three"></el-tab-pane>
        <el-tab-pane label="案例库" name="Four"></el-tab-pane>
        <el-tab-pane label="登录" name="five"></el-tab-pane>
        <el-tab-pane label="注册" name="six"></el-tab-pane>
      </el-tabs>
    </el-header>
    <el-container>
      <el-aside width="280px">
        <div id="Left">
          <component :is="componentTag"></component>

          <div id="notice">
            <Notice></Notice>
          </div>
        </div>
      </el-aside>
      <el-main>
        <component :is="compontent_1"></component>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import LeftSecond from "./index/Left_two";

  import LeftThird from "./index/Left_three";

  import LeftFourth from "./index/Left_Four";

  import index from "./index";

  import Notice from "./context/Notice";

  export default {
    name: "TheMain",
    components: {
      LeftSecond,
      LeftThird,
      LeftFourth,
      index,
      Notice
    },
    data() {
      return {
        activeName: 'first',
        componentTag: '',
        compontent_1:'index'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        this.componentTag = 'Left_' + tab.name;

        if(tab.name==='first'){
          this.compontent_1='index'
        }else {
          this.compontent_1=''
        }

        if (tab.name === "five") {
          this.$router.push("/MyLogin");
        }
        if (tab.name === "six") {
          this.$router.push('/Register');
        }
      },

    }
  }

</script>

<style scoped>

  #notice {
    line-height: 50px;
  }

  .el-header, .el-footer {
    background-color: #74db9a;
    color: #ffffff;
    /*text-align: center;*/
    line-height: 60px;
  }

  .el-aside {
    background-color: #c7d3c7;
    color: #333;
    /*text-align: center;*/
    line-height: 400px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /*text-align: center;*/
    line-height: 40px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #8dc4e4;
  }

  .bg-purple-light {
    background: #e98192;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 10px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
